<template>
  <div class="app-container home">
    <div class="bg_fff mb_12 pl_14">
      <breadcrumb />
    </div>
    <div class="bg_fff p_14 pb_0 mb_12">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="用户名：" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入用户名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="会员ID：" prop="id">
          <el-input
            v-model="queryParams.id"
            placeholder="请输入会员ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
            <el-option
              v-for="dict in statusList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="资质审核状态" prop="check_status">
          <el-select v-model="queryParams.check_status" placeholder="请选择资质审核状态" clearable @change="handleQuery">
            <el-option
              v-for="(dict,val) in zzList"
              :key="dict"
              :label="dict"
              :value="val"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg_fff p_10 listbody">
      <div class="flexrowbetween flexwrapper mb_15" style="align-items: flex-start">
        <div class="flex">
        </div>
        <div class="flex">
          <el-button
            plain
            type="primary"
            class="bg_fff mr_5 f-14 c_primary"
            size="mini"
            @click="selectAll"
            >全选</el-button
          >
          <el-button
            plain
            type="primary"
            class="bg_fff f-14 c_primary"
            size="mini"
            @click="selectInvert"
            >反选</el-button
          >
          <el-button type="primary" size="mini" class="f-14 mr_10">导出</el-button>
          <el-dropdown trigger="click" class="mr_10">
            <el-button type="primary" size="mini" class="f-14">
              自定义列表
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <div class="dropbody">
                <el-checkbox-group v-model="checkedOption" class="flexcolumn" @change="changeSelect">
                  <el-checkbox v-for="(item,index) in tableColumns" :label="item.label" :key="index" class="m_5">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        ref="tablelayout"
        class="commtable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <template v-for="(item,index) in tableColumns">
          <el-table-column  :key="index" :label="item.label" align="center" :prop="item.key" :min-width="item.minWidth?item.minWidth:``" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true" v-if="coordinatedOption.includes(item.label)">
            <!--用于表格自定义-->
            <template slot-scope="scope">
              <!-- 序号 -->
              <div v-if="item.key=='xuhao'">
                <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
              </div>
              <!-- 状态 -->
              <div v-else-if="item.key=='status'">
                <el-switch
                  v-model="scope.row[item.key]"
                  :active-value="1"
                  :inactive-value="0"
                  @change="changeStatus(scope.row)"
                ></el-switch>
              </div>
              <div v-else-if="item.key=='detail'">
                <span class="c_primary commhover" @click="handleOpen(scope.row)">详情</span>
              </div>
              <div v-else>{{scope.row[item.key]||'-'}}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.num"
        @pagination="getList"
      />
    </div>
    <el-dialog
      title="协作者分配账户详情"
      :visible.sync="open"
      width="80%"
      class="commdia"
      :before-close="handleClose"
      :close-on-click-modal='false'
    >
      <sub-table v-if="open" :rowitem='rowitem' @close='handleClose' />
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SubTable from './components/SubTable.vue'
import { getAdvmsterList,userDel,openStatus, getCustomToken } from '@/api/advmaster'
export default {
  data() {
    return {
      statusList:[{value:1,label:'正常'},{value:0,label:'暂停'}],
      tableColumns: [
        { key: 'xuhao', label: '序号', visible: true, minWidth: 80 },
        { key: 'name', label: '主账号邮箱/手机号', visible: true, minWidth: 150 },
        { key: 'id', label: '主账号ID', visible: true, minWidth: 100 },
        { key: 'status', label: `状态`, visible: true, minWidth: 100 },
        { key: 'detail', label: `协作者详情`, visible: true, minWidth: 150 },
        { key: 'plugName', label: `今日充值金额`, visible: true, minWidth: 150 },
        { key: 'directional', label: `累计充值总金额`, visible: true, minWidth: 150 },
        { key: 'position', label: `当前协作者账号数`, visible: true, minWidth: 150 },
        { key: 'custom_coin', label: `今日消耗账号数`, visible: true, minWidth: 150 },
        { key: 'timeChange', label: `协作者今日总消耗（广告币）`, visible: true, minWidth: 200 },
        { key: 'msg', label: `备注`, visible: true, minWidth: 100 }
      ],
      zzList:[],
      queryParams: {
        page: 1,
        num: 10,
        name:undefined,
        id:undefined,
        check_status:undefined,
        status: undefined
      },
      total: 1,
      loading: false,
      tableData: [],
      checkedOption: [],
      rolesList:[],
      rowitem:null,
      rowids:[],
      multiple: true,
      // 是否显示弹出层
      open: false,
    };
  },

  props: {
    type: {
      type: Number,
      default: 1,
    },
  },
  components:{
    SubTable
  },

  computed: {
    ...mapState({
      coordinatedOption: (state) => state.paramsoption.coordinatedOption,
    }),
  },

  created() {
    let coordinatedOption = JSON.parse(localStorage.getItem("coordinatedOption"));
    if (coordinatedOption) {
      this.changeSelect(coordinatedOption);
    }
    this.getDicts('/manager/api/getCustomCheckStatus').then(res=>{
      this.zzList = res.data
    })
    this.checkedOption = this.coordinatedOption;
    this.getList()
  },

  methods: {
    getList() {
      this.loading = true;
      let params = {
        page: this.queryParams.page,
        num: this.queryParams.num
      }
      if(this.queryParams.name){
        params.name = this.queryParams.name
      }
      if(this.queryParams.id){
        params.id = this.queryParams.id
      }
      if(this.queryParams.status||this.queryParams.status==0){
        params.status = this.queryParams.status
      }
      if(this.queryParams.check_status||this.queryParams.check_status==0){
        params.check_status = this.queryParams.check_status
      }
      getAdvmsterList(params).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.count;
        this.loading = false;
      });
      this.loading = false;
    },

    changeSelect(arr) {
      this.$store.commit("SET_COORDINATEDOPTION", arr);
      this.$nextTick(() => {
        //在数据加载完，重新渲染表格
        this.$refs.tablelayout && this.$refs.tablelayout.doLayout();
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.rowids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    selectAll() {
      //全选功能,先进行清除状态，然后再选择是全选还是多选
      this.$refs.tablelayout.clearSelection();
      this.tableData.forEach((row) => {
        this.$refs.tablelayout.toggleRowSelection(row);
      })
    },

    selectInvert() {
      //反选
      let listfiter = this.tableData.filter(item => {
        return this.rowids.indexOf(item.id) == -1;// 不包含选中的
      });
      this.$refs.tablelayout.clearSelection();
      if (listfiter && listfiter.length > 0) {
        listfiter.forEach((item) => {
          this.$refs.tablelayout.toggleRowSelection(item);
        })
      }
    },

    reset() {
      this.form = {
        id:undefined,
        role_id: undefined,
        name: undefined,
        nickname:undefined,
        email:undefined,
        password:undefined,
        phone:undefined,
        status: 1
      };
      this.resetForm("form");
    },

    getRoles(){
      this.getDicts('/manager/api/getRoleList').then(res=>{
        this.rolesList = res.data
      })
    },

    /** 详情 */
    handleOpen(row) {
      this.rowitem = row
      this.open = true;
    },

    handleClose(type) {
      if(type == 1){
        this.getList()
      }
      this.open = false;
    },

    /** 暂停按钮操作 */
    handleDelete(row) {
      const infoIds = row.id;
      this.$modal
        .confirm('是否确认暂停编号为"' + infoIds + '"的用户？')
        .then(function () {
          return userDel({id:infoIds});
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("暂停成功");
        })
        .catch(() => {});
    },

    handleStart(row) {
      const infoIds = row.id;
      this.$modal
        .confirm('是否确认启用编号为"' + infoIds + '"的用户？')
        .then(function () {
          return openStatus({id:infoIds});
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("启用成功");
        })
        .catch(() => {});
    },


    handleGround(row){
      getCustomToken({id:row.id}).then(res=>{
        let token = res.data;
        //  + "&activeId=" + row.id
        window.open(
          this.userdomain + "login?token=" + token
        );
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.iconbox {
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 2px;
}
</style>
